<template>
  <div id="funcEntrance">
    <h3 class="echarts-title">
      功能入口使用占比统计
      <popover :descriptionData="functionEnter"></popover>
    </h3>
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="searchList"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:funcEntrance:sourceExport'"
        type="warning"
        icon="el-icon-download"
        @click="showExportEnter"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <div class="base-col">
      <div id="enterAll" class="box"></div>
    </div>
    <div class="base-col">
      <div id="enterFormal" class="box"></div>
    </div>
    <div class="base-col">
      <div id="enterMoney" class="box"></div>
    </div>
    <div class="base-col">
      <div id="enterTry" class="box"></div>
    </div>
    <div class="base-col">
      <div id="enterOther" class="box"></div>
    </div>
    <dialogSource
      v-if="dialogSourceData.isShow"
      :dialog-data="dialogSourceData"
    ></dialogSource>
  </div>
</template>

<script>
import { getEnterList } from '@/api/dataStatistics/baseData/index.js' // 接口
import topSearch from '@component/dataStatistics/baseData/enterCom/funcTopSearch' // 上部搜索条件
import dialogSource from '@component/dataStatistics/baseData/enterCom/dialogfuncEntrance' // 功能入口使用占比导出弹窗
import popover from '@component/dataStatistics/common/popover' // 注释说明
export default {
  name: 'funcEntrance',
  msg: '基础数据-功能入口使用占比统计',
  props: ['powerAry'],
  components: { topSearch, dialogSource, popover },
  data() {
    return {
      dialogSourceData: {
        isShow: false, // 默认隐藏
        params: null // 参数
      },
      formInline: {
        source: '', // 来源
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        createTime: []
      },
      option: {
        legend: {
          bottom: 5,
          left: 'center'
        },
        title: [
          {
            left: '50%',
            top: '0',
            textAlign: 'center',
            subtextStyle: {
              fontSize: 18
            }
          }
        ],
        tooltip: {
          triggerOn: 'mousemove'
        },
        label: {
          formatter: function(val) {
            //让series 中的文字进行换行
            let str = val.value + '人 ' + '\n' + val.percent + '%'
            return str
          },
          position: 'outer',
          fontSize: 13,
          lineHeight: 16
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['50%', '150'],
            animation: false,
            top: 0,
            bottom: 0,
            labelLine: {
              length: 1
            }
          }
        ]
      },
      enterAll: null,
      enterTry: null,
      enterFormal: null,
      enterMoney: null,
      enterOther: null,
      powerStr: 'system:funcEntrance:list' // 是否查询的标识
    }
  },
  computed: {
    functionEnter() {
      return this.$store.state.descriptionData.functionEnter
    }
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      this.enterAll = this.echarts.init(document.getElementById('enterAll'))
      this.enterTry = this.echarts.init(document.getElementById('enterTry'))
      this.enterFormal = this.echarts.init(
        document.getElementById('enterFormal')
      )
      this.enterMoney = this.echarts.init(document.getElementById('enterMoney'))
      this.enterOther = this.echarts.init(document.getElementById('enterOther'))
      this.enterAll.setOption(this.option)
      this.enterTry.setOption(this.option)
      this.enterFormal.setOption(this.option)
      this.enterMoney.setOption(this.option)
      this.enterOther.setOption(this.option)
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.enterAll.resize()
        _this.enterTry.resize()
        _this.enterFormal.resize()
        _this.enterMoney.resize()
        _this.enterOther.resize()
      })
    },
    //获取总数
    getTotalNum(ary) {
      let total = 0
      ary.forEach((item) => {
        total += parseFloat(item.value)
      })
      return total
    },
    /* 来源占比--列表 */
    searchList() {
      // if (!this.powerAry.includes(this.powerStr)) return
      this.loading = true
      let obj = Object.assign({}, this.formInline)
      delete obj.createTime
      getEnterList(
        obj,
        (response) => {
          let { all, deposit, tryLearn, vip, none } = response
          let allTotal = this.getTotalNum(all)
          let tryTotal = this.getTotalNum(tryLearn)
          let vipTotal = this.getTotalNum(vip)
          let depositTotal = this.getTotalNum(deposit)
          let noneTotal = this.getTotalNum(none)
          let allOpt = {
            title: { subtext: `全部用户` },
            tooltip: {
              formatter: `全部用户：${allTotal}人<br/>{b}用户: {c}人<br/> 占比：{d}%`
            },
            series: [{ data: all }]
          }
          let tryOpt = {
            title: { subtext: `试学用户` },
            tooltip: {
              formatter: `试学用户：${tryTotal}人<br/>{b}用户: {c}人<br/> 占比：{d}%`
            },
            series: [{ data: tryLearn }]
          }
          let officOpt = {
            title: { subtext: `正式用户` },
            tooltip: {
              formatter: `正式用户：${vipTotal}人<br/>{b}用户: {c}人<br/> 占比：{d}%`
            },
            series: [{ data: vip }]
          }
          let depositOpt = {
            title: { subtext: `定金用户` },
            tooltip: {
              formatter: `定金用户：${depositTotal}人<br/>{b}用户: {c}人<br/> 占比：{d}%`
            },
            series: [{ data: deposit }]
          }
          let noneOpt = {
            title: { subtext: `无身份用户` },
            tooltip: {
              formatter: `无身份用户：${noneTotal}人<br/>{b}用户: {c}人<br/> 占比：{d}%`
            },
            series: [{ data: none }]
          }
          this.enterAll.setOption(allOpt)
          this.enterTry.setOption(tryOpt)
          this.enterFormal.setOption(officOpt)
          this.enterMoney.setOption(depositOpt)
          this.enterOther.setOption(noneOpt)
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /*来源占比--导出*/
    showExportEnter() {
      this.dialogSourceData.isShow = true
      let { startDate, endDate, source } = this.formInline
      this.dialogSourceData.params = { startDate, endDate, source }
    }
  }
}
</script>

<style lang="less">
#funcEntrance {
  margin: 0 20px 20px;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  .box {
    width: 100%;
    height: 315px;
  }
}
</style>
